<template>
	<div class="spec-preview">
		<img :src="image.imgUrl" />
		<div class="event" @mousemove="handleMove"></div>
		<div class="big">
			<img
				:src="image.imgUrl"
				:style="{ left: -2 * left + 'px', top: -2 * top + 'px' }" />
		</div>
		<div class="mask" :style="{ left: left + 'px', top: top + 'px' }"></div>
	</div>
</template>

<script>
export default {
	name: 'JZoom',
	props: {
		image: {
			type: Object,
			// 第一次渲染没数据 给一个默认值就不会报错
			default: () => ({}),
		},
	},
	data() {
		return {
			left: 0,
			top: 0,
		}
	},
	/*
  大图：800 * 800
  小图：400 * 400
  小绿：200 * 200
*/
	methods: {
		handleMove(e) {
			// 当前距离-小绿的一半
			let left = e.offsetX - 100
			let top = e.offsetY - 100
			// 控制小绿边距
			if (left < 0) left = 0
			if (left > 200) left = 200
			if (top < 0) top = 0
			if (top > 200) top = 200

			this.left = left
			this.top = top
		},
	},
}
</script>

<style lang="less">
.spec-preview {
	position: relative;
	width: 400px;
	height: 400px;
	border: 1px solid #ccc;

	img {
		width: 100%;
		height: 100%;
	}

	.event {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.mask {
		width: 50%;
		height: 50%;
		background-color: rgba(0, 255, 0, 0.3);
		position: absolute;
		left: 0;
		top: 0;
		display: none;
	}

	.big {
		width: 100%;
		height: 100%;
		position: absolute;
		top: -1px;
		left: 100%;
		border: 1px solid #aaa;
		overflow: hidden;
		z-index: 998;
		display: none;
		background: white;

		img {
			width: 200%;
			max-width: 200%;
			height: 200%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.event:hover ~ .mask,
	.event:hover ~ .big {
		display: block;
	}
}
</style>
